<script setup lang="ts">
import { ref } from 'vue'
import { noticeStatus } from '@/views/system/dictionary'
import { Plus, Search } from '@element-plus/icons-vue'
import { addJueSeApi, getJueSeWeiHuApi } from '@/api/system'
import addGongGao from './components/addGongGao.vue'
import { ElMessage, ElMessageBox, type ComponentSize } from 'element-plus'
import { onMounted } from 'vue'

const GongGaoloading = ref(true)
const GongGaoFrom = ref({
  noticeNameQuery: '',
  noticeValid: 'valid',
  page: 1,
  rows: 20
})
const noticeSize = ref<ComponentSize>('default')
const noticeTotal = ref<any>(0)
// 查询公告
const noticeList = ref<any>([])
const GongGaoSearchBtn = () => {
  getInfoFn()
}

const getInfoFn = async () => {
  GongGaoloading.value = true
  const params = {
    sqlId: 'noticeMgr.getAllNotice',
    sqlParam: JSON.stringify({
      noticeNameQuery: GongGaoFrom.value.noticeNameQuery,
      noticeValid: GongGaoFrom.value.noticeValid
    }),
    pagination: true,
    page: GongGaoFrom.value.page,
    rows: GongGaoFrom.value.rows
  }
  // 获取公告列表
  await getJueSeWeiHuApi(params)
    .then((res: any) => {
      noticeTotal.value = res.total
      noticeList.value = res.rows
      GongGaoloading.value = false
    })
    .catch(() => {
      ElMessage({ message: '数据获取失败', type: 'error' })
    })
}

const handleSizeChange = (val: number) => {
  GongGaoFrom.value.page = 1
  GongGaoFrom.value.rows = val
  getInfoFn()
}

const handleCurrentChange = (val: number) => {
  GongGaoFrom.value.page = val
  getInfoFn()
}

// 添加公告
const ggTitle = ref<string>('新增公告')
const ggFromInfo = ref<any>({})
const isShow = ref(false)
// const addGongGaoRef = ref<any>()
const addNoticeBtn = () => {
  ggTitle.value = '新增公告'
  isShow.value = true
}

// 修改公告
const changeBtn = (row: any) => {
  ggTitle.value = '修改公告'
  ggFromInfo.value = row
  isShow.value = true
}

// 删除公告
const deleteBtn = (row: any) => {
  const params = {
    sqlId: 'noticeMgr.deleteNotice',
    sqlParam: JSON.stringify({ notice_id: row.notice_id })
  }
  ElMessageBox.confirm('你确定要删除本条公告？', '删除公告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await addJueSeApi(params)
        .then((res: any) => {
          if (res === 'success') {
            getInfoFn()
            ElMessage({ message: '删除成功', type: 'success' })
          } else {
            ElMessage({ message: '删除失败', type: 'error' })
          }
        })
        .catch(() => {
          ElMessage({ message: '删除失败', type: 'error' })
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}

onMounted(() => {
  getInfoFn()
})
</script>
<template>
  <div class="GongGaoGuanLiBox">
    <el-form :inline="true" :model="GongGaoFrom" style="margin-top: 15px">
      <el-form-item label="公告状态：">
        <el-select
          v-model="GongGaoFrom.noticeValid"
          placeholder="请选择公告状态"
          style="width: 120px"
        >
          <el-option
            v-for="item in noticeStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="公告名称：">
        <el-input v-model="GongGaoFrom.noticeNameQuery" placeholder="请输入公告名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="GongGaoSearchBtn">查询</el-button>
        <el-button type="success" plain :icon="Plus" @click="addNoticeBtn">添加公告</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :scrollbar-always-on="true"
      class="TableBox"
      v-loading="GongGaoloading"
      :data="noticeList"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column prop="notice_name" label="公告名称" />
      <el-table-column prop="user_name" label="创建人" width="180" />
      <el-table-column prop="create_date" label="创建时间" width="180" />
      <el-table-column prop="end_date" label="过期时间" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button text type="primary" @click="changeBtn(scope.row)">修改</el-button>
          <el-button type="danger" text @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="GongGaoFrom.page"
      v-model:page-size="GongGaoFrom.rows"
      :page-sizes="[10, 20, 30, 40]"
      :size="noticeSize"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="noticeTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <addGongGao
    v-if="isShow"
    v-model:is-show="isShow"
    :title="ggTitle"
    :fromInfo="ggFromInfo"
    @getNewInfoFn="getInfoFn"
    @get-table-data="getInfoFn"
  />
</template>
<style scoped lang="less">
.GongGaoGuanLiBox {
  height: calc(100vh - 200px);
  position: relative;
  padding: 0 8px;
  :deep(.TableBox) {
    // width: 1200px !important;
    height: calc(100vh - 270px);
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow: auto !important; // 横向滚动
    }
  }
  .paginationBox {
    position: fixed;
    bottom: 20px;
  }
}
</style>
